<template>
    <div id="login">
        <div id="l1">
            <h1>欢迎进入美食地图</h1>
            <el-input v-model="account" placeholder="请输入账号" />
            <el-input v-model="pwd" type="password" placeholder="请输入密码" show-password />
            <a href="">忘记密码了?</a>
            <div id="buttons">
                <el-button type="success" @click="gohome()">登录</el-button>
                <el-button plain @click="dialogFormVisible = true">注册</el-button>

            </div>
        </div>
        <el-dialog v-model="dialogFormVisible" title="注册" width="500">
            <el-form :model="form">
                <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="form.nickname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.pwd" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click=goregister()>注册</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()
const account = ref('')
const pwd = ref('')

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    name: '',
    pwd: '',
    nickname: '',
})

async function gohome() {
    try {
        // 发送POST请求进行登录
        const response = await axios.post(
            "http://localhost:8081/login",
            {
                "account": account.value,
                "password": pwd.value
            }
        );
        // 根据后端返回的结果判断是否登录成功，这里简单假设返回状态码为200表示成功
        if (response.data.code === 200) {
            // 登录成功后进行路由跳转
            router.push({ name: 'Home' });
        } else {
            alert('登录失败，状态码：', response.data.code, "请检查账号密码是否正确");
        }
    } catch (error) {
        alert('登录请求发生错误：', error);
    }
}

async function goregister() {
    try {
        // 发送POST请求进行注册
        const response = await axios.post(
            "http://localhost:8081/register",
            {
                "id": "",
                "account": form.name,
                "password": form.pwd,
                "nickName": form.nickname,
                "icon": "",
                "email": ""
            }
        );
        // 根据后端返回的结果判断是否注册成功，这里简单假设返回状态码为200表示成功
        if (response.data.code === 200) {
            // 注册成功后进行路由跳转
            alert("注册成功")
            location.reload()
        } else {
            alert("注册失败", response.data.msg);
        }
    } catch (error) {
        alert('注册请求发生错误：', error);
    }
}
</script>

<style scoped>
#login {
    height: 100vh;
    width: 100vw;
    background: url('../assets/美食地图.jpg') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    #l1 {
        width: 320px;
        height: auto;
        margin: auto auto;
        padding: 30px;
        border: 160px solid rgba(208, 238, 255, 0.7);
        border-radius: 50%;
        background-color: rgba(228, 245, 255, 0.7);

        * {
            display: block;
            width: 320px;
            margin-bottom: 20px;
        }

        h1 {
            margin-left: -50%;
            height: 80px;
            width: 200%;
            text-align: center;
            color: black;
            overflow: auto;
            font-size: 64px;
            font-family: "方正狂草简体", cursive;
        }

        a {
            width: 80px;
            font-size: 14px;
            color: rgb(0, 128, 255);
        }

        :deep(.el-input__wrapper) {
            width: 300px !important;
            padding: 1px 10px;
        }

        #buttons {
            display: flex;
        }
    }
}
</style>
